<template>
	<div class="weekend">
		<div class="weekend-title">周末去哪儿</div>
		<ul>
			<li class="item" v-for="item in weekend" :key="item.id">
				<div class="item-img">
					<img :src="item.imgUrl" alt="">
				</div>
				<div class="item-info">
					<p class="item-title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	export default{
		props:{
			weekend:Array
		},
		data(){
			return{
			
			}
		}
	}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/base.scss';
.weekend-title{
	height:px2rem(20px);
	line-height: px2rem(20px);
	background: #ccc;
	font-size: px2rem(8px);
	text-indent:1em;
	color:#555;
}
.item{
	width:100%;
	height:px2rem(222px);
}
.item-img{
	height:px2rem(150px);
}
.item-img img{
	width:100%;
	height:100%;
}
.item-info{
	padding:px2rem(10px);
}
.item-title{
	font-size: px2rem(18px);
	line-height: px2rem(27px);
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	color: #444;
}
.item-desc{
	font-size: px2rem(16px);
	line-height: px2rem(20px);
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	color:#777;
}
</style>